<template>
  <div class='hrTargetManage' >
      <el-row class='first-title'>
        <div class="lf">
          <h3>各职级人均收入</h3>
        </div>
      </el-row>
      <el-row class="third-card">
          <div class="table-container">
            <div class="handle-table">
                <div class="left">
                    <el-form :inline="true" :model="formInline">
                        <el-form-item label="请选择年份：">
                            <el-select
                                v-model="formInline.year"
                                @change='onChangeYear'>
                                <el-option
                                    v-for='item in formInline.yearOption'
                                    :key='item.year'
                                    :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">{{formInline.btTypeName}}</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <el-table
                :data="mainTable.showList"
                style="width: 100%"
                v-show="formInline.btTypeName === '编辑'? true: false"
                >
                <el-table-column
                    type="index"
                    width="55">
                </el-table-column>
                <el-table-column
                    v-for="column in mainTable.mainColumns"
                    :key='column.prop'
                    :prop='column.prop'
                    :label='column.label'
                    :width='column.width'
                    :formatter="column.formatter">
                    <template scope='scope'>
                        <span :class="scope.row[column.prop]==='未填写'?'unWrite':''">
                            {{scope.row[column.prop]}}
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <el-table
                :data="mainTable.showList"
                style="width: 100%"
                v-show="formInline.btTypeName === '保存'? true: false"
                >
                <el-table-column
                    type="index"
                    width="55">
                </el-table-column>
                <el-table-column
                    v-for="column in mainTable.mainColumns"
                    :key='column.prop'
                    :prop='column.prop'
                    :label='column.label'
                    :width='column.width'
                    :formatter="column.formatter">
                    <template scope='scope'>
                        <span v-show="column.prop === 'descrshort'? true: false">
                            {{scope.row[column.prop]}}
                        </span>
                        <el-select
                            size='small'
                            v-model="scope.row[column.prop]"
                            v-show="column.prop === 'unit'? true: false">
                            <el-option
                                label="万人民币"
                                value="万人民币"></el-option>
                            <el-option
                                label="万港币"
                                value="万港币"></el-option>
                        </el-select>
                        <!-- <el-input
                            size='small'
                            v-model.number="scope.row[column.prop]"
                            v-show="(column.prop === 'unit' || column.prop === 'descrshort')? false: true">
                        </el-input> -->
                        <input
                            type="number"
                            class="small"
                            v-model.number="scope.row[column.prop]"
                            v-show="(column.prop === 'unit' || column.prop === 'descrshort')? false: true">
                    </template>
                </el-table-column>
            </el-table>
         </div>
      </el-row>
  </div>
</template>

<script>
import Vue from 'vue'
import myPagination from '@/components/public/pagination'
import searchBox from '@/components/public/search-box'
import {
	MessageBox,
	Message,
	Button,
	ButtonGroup,
	Switch,
	Select,
	Input,
	Col,
	Row,
	Dialog,
	Checkbox,
	Radio,
	RadioGroup,
	RadioButton,
	Option,
	Table,
	TableColumn,
	Form,
	FormItem} from 'element-ui'
// Vue.use(MessageBox)
// Vue.use(Message)
Vue.use(Button)
Vue.use(ButtonGroup)
Vue.use(Switch)
Vue.use(Select)
Vue.use(Input)
Vue.use(Col)
Vue.use(Row)
Vue.use(Dialog)
Vue.use(Checkbox)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(RadioButton)
Vue.use(Option)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Form)
Vue.use(FormItem)

export default {
	data () {
		return {
			formInline: {
				year: '',
				btTypeName: '编辑',
				yearOption: []
			},
			mainTable: {
				showList: [],
				editwListCopy: [],
				mainColumns: []
			}
		}
	},
	methods: {
		confirmModal: function (title, content, type, sureCB, cancelCB) {
			MessageBox.confirm(content, title, {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: type ? type : 'warning'
			}).then(() => {
				if (sureCB) {
					sureCB()
				}
			}).catch(() => {
				if (cancelCB) {
					cancelCB()
				}
			})
		},
		isEqualObject: function (a, b) {
			//判断两个对象是否内容相等
			var propsA = Object.getOwnPropertyNames(a),
				propsB = Object.getOwnPropertyNames(b)
			if (propsA.length != propsB.length) {
				return false
			}
			for (var i = 0; i < propsA.length; i++) {
				var propName = propsA[i]
				if (a[propName] !== b[propName]) {
					return false
				}
			}
			return true
		},
		// 修改年份
		onChangeYear: function (v) {
			this.ajaxPost('/perRank/onchangePerRankIncomeList', { year: v }, this.getTableDataCB)
		},
		// 获取表格数据
		getTableData: function (year) {
			this.ajaxPost('/perRank/getPerRankIncomeList', null, this.getTableDataCB)
		},
		getTableDataCB: function (res) {
			if (res.data.status === 1) {
				this.mainTable.showList = res.data.datas.mainList
				this.mainTable.editwListCopy = JSON.parse(JSON.stringify(res.data.datas.mainList))
				this.formInline.year = res.data.datas.checkYear
				if (res.data.datas.years) {
					this.formInline.yearOption = []
					for (var i = 0; i < res.data.datas.years.length; i++) {
						this.formInline.yearOption.push({
							label: res.data.datas.years[i],
							value: res.data.datas.years[i]
						})
					}
				}
				this.mainTable.mainColumns = []
				this.mainTable.mainColumns.push({
					prop: 'descrshort',
					label: '业务单位'
				})
				this.mainTable.mainColumns.push({
					prop: 'unit',
					label: '货币单位'
				})
				for (var i = 0; i < res.data.datas.perRankLise.length; i++) {
					this.mainTable.mainColumns.push({
						prop: res.data.datas.perRankLise[i].rankId,
						label: res.data.datas.perRankLise[i].rankName
					})
				}
			}
		},
		// 编辑表格数据
		onSubmit: function () {
			if (this.formInline.btTypeName === '编辑') {
				this.ajaxPost('/perRank/getPerRankIncomeListByYear', { year: this.formInline.year }, this.onSubmitCB)
			}
			if (this.formInline.btTypeName === '保存') {
				var obj = JSON.parse(JSON.stringify(this.mainTable.showList))
				var obj2 = JSON.parse(JSON.stringify(this.mainTable.editwListCopy))
				var data = []
				var mid, params
				for (var i = 0; i < obj.length; i++) {
					mid = false
					for (var j = 0; j < obj2.length; j++) {
						if (obj[i].setid === obj2[j].setid) {
							mid = this.isEqualObject(obj[i], obj2[j])
							if (!mid) {
								data.push(obj[i])
							}
							break
						}
					}
				}
				params = {
					mainList: data,
					year: this.formInline.year
				}
				if (!data || data.length === 0) {
					Message.success('修改成功!')
					if (this.formInline.btTypeName === '编辑') {
						this.formInline.btTypeName = '保存'
						this.getTableDataCB(res)
						return
					}
					if (this.formInline.btTypeName === '保存') {
						this.formInline.btTypeName = '编辑'

						this.onChangeYear(this.formInline.year)
						return
					}
					return
				}



				this.ajaxPost('/perRank/savePerRankIncomeList', params, this.onSubmitCB)
			}
		},
		onSubmitCB: function (res) {
			if (res.data.status === 1) {
				if (this.formInline.btTypeName === '编辑') {
					this.formInline.btTypeName = '保存'
					this.getTableDataCB(res)
					return
				}
				if (this.formInline.btTypeName === '保存') {
					this.formInline.btTypeName = '编辑'
					Message.success('保存成功!')
					this.onChangeYear(this.formInline.year)
					return
				}
			}
		},
		ajaxPost: function (url, params, callback) {
			var self = this
			this.Axios.Post(url, params)
				.then(function (res) {
					if (callback) {
						callback(res, self)
					}
				})
		}
	},
	computed: {
	},
	filters: {
	},
	mounted: function () {
		this.getTableData()
	},
	components: {
	},
	watch: {
	}
}
</script>

<style scoped>
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #bfcbd9;
  color: #1f2d3d;
  font-size: inherit;
  height: 36px;
  line-height: 1;
  width: 100%;
  display: inline-block;
  box-sizing: border-box;
  outline: 0;
  padding: 3px 10px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
input.small {
  height: 30px;
}
input.mini {
  height: 24px;
}
.hrTargetManage .first-title {
  background-color: #fff;
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
  height: 60px;
  line-height: 58px;
  padding: 0 20px;
}

.hrTargetManage .first-title h3 {
  font-size: 14px;
  font-weight: 700;
  color: #6c6a6c;
}
.hrTargetManage .first-title .search {
  float: right;
}
.hrTargetManage .second-sec {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 50px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #00a65a;
  color: #444;
  font-family: 'Microsoft YaHei', museo-slab, 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
  font-weight: 400;
}
.hrTargetManage .table-container {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #00a65a;
  background-color: #fff;
  padding: 0 10px;
  min-height: 400px;
}
.hrTargetManage .handle-table {
  clear: both;
  padding: 20px 20px 30px 20px;
  border-bottom: 1px solid #dfe6ec;
}
.hrTargetManage .selectSet {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  position: relative;
  clear: both;
}
.hrTargetManage .selectSet .default {
  float: left;
  background-color: #f4f4f4;
  color: #444;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  position: relative;
  z-index: 1;
}
.hrTargetManage .selectSet .alt {
  margin-right: -1px;
}
.hrTargetManage .selectSet a:hover {
  z-index: 4;
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.hrTargetManage .selectSet .alt {
  margin-right: -1px;
}

.hrTargetManage .selectSet .default:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.hrTargetManage .selectSet .default:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.hrTargetManage .third-card .unWrite {
  color: #f8ac59;
}
.hrTargetManage .third-card .collapse-card .box-title {
  display: inline-block;
  font-size: 18px;
  color: #444;
  font-weight: 500;
  margin: 0;
  line-height: 1;
}
.hrTargetManage .third-card .collapse-card .collapse-container {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
.hrTargetManage .third-card .collapse-card .collapse {
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0px;
  padding: 5px;
  font-size: 12px;
  background: transparent;
  color: #97a0b3;
}
.hrTargetManage .totalNum {
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  position: relative;
}
.hrTargetManage .paginationDiv {
  padding: 10px 0;
  margin-top: 20px;
}
.lookModal li {
  padding: 10px 40px 10px 20px;
}
.lookModal .title {
  float: left;
  width: 80px;
  text-align: right;
  font-weight: bold;
}
.lookModal .value {
  margin-left: 100px;
  border-bottom: 1px solid #eee;
  padding: 2px 10px;
  min-height: 24px;
}
.editModal .editModalDiv {
  padding: 0 40px 0 20px;
}
</style>
<style>

</style>
